<template>
  <div class="dialog-box"><slot></slot></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    to: {
      type: String,
      require: true,
    },
  },
  mounted() {
    const toEl = document.querySelector(this.to);

    if (toEl) {
      toEl.appendChild(this.$el);
    }
  },
  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
  destroyed() {
    const toEl = document.querySelector(this.to);

    if (toEl) {
      toEl.removeChild(this.$el);
    }
  },
};
</script>
<style>
.dialog-box {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>
